<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0; padding:0;}
li{list-style:none;}
a{text-decoration:none; font-size:12px; color:#333;}

ul{height:78px; width:1010px;  margin:20px auto  0; background:#ff0;}
ul li{float:left; height:78px;background:url(images/nav.png)  no-repeat;text-indent:-9999999px;}
.index{width:98px; }

.wechat{width:122px; background-position:-100px 0;}
.open{width:144px;  background-position:-224px 0;}
.sell{width:118px;background-position:-490px 0;}
.game{width:122px;background-position:-614px 0;}
ul li:hover{background-image:url(images/nav-on.png) ;}
</style>
</head>

<body>
<ul>
	<li class="index"><a href="#">首页</a></li>
    <li class="wechat"><a href="#">微信学院</a></li>
    <li class="open"><a href="#">开放平台学院</a></li>
    <li class="sell"><a href="#">营销学院</a></li>
    <li class="game"><a href="#">游戏学院</a></li>
</ul>
</body>
</html>
